<template>
  <el-dialog custom-class="enterprise_modal" v-model="drawer.show" width="700px" :title="drawer.title" draggable :before-close="btnCancel" close-on-click-modal="false">
    <el-form ref="ruleFormRef" :model="formData" label-width="80px" :rules="rules">
      <el-form-item label="售卖价格" prop="sale_price"> <el-input v-model="formData.sale_price" placeholder="请输入售卖价格" class="batch_frame" oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g, '')" /><span>元</span> </el-form-item>
      <el-form-item label="成本价格" prop="cost_price"> <el-input v-model="formData.cost_price" placeholder="请输入成本价格" class="batch_frame" oninput="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g, '')" /><span>元</span> </el-form-item>
      <el-form-item label="库存" prop="stock_qty"> <el-input v-model="formData.stock_qty" placeholder="请输入库存" class="batch_frame" oninput="value=value.replace(/[^\d]/g,'')" /><span>件</span> </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="btnCancel">取消</el-button>
      <el-button type="primary" @click="resetForm">保存</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, reactive, nextTick, onMounted, watch } from 'vue'
  const emit = defineEmits(['updateData'])
  const ruleFormRef = ref()
  let drawer = ref({
    show: false,
    title: '批量设置',
    direction: 'rtl' //从右往左打开
  })
  const rules = {
    sale_price: [{ required: true, message: '请输入销售价格', trigger: 'blur' }],
    cost_price: [{ required: true, message: '请输入成本价格', trigger: 'blur' }],
    stock_qty: [{ required: true, message: '请输入总库存', trigger: 'blur' }]
  }
  let formData = reactive({
    stock_qty: '', //总库存 spec_type=1必传
    cost_price: '', //成本价格 spec_type=1必传
    sale_price: '' //销售价格 spec_type=1必传
  })
  // 批量设置
  const resetForm = () => {
    ruleFormRef.value.validate(async (valid, fileds) => {
      if (valid) {
        emit('updateData', formData)
        drawer.value.show = false
        btnCancel()
      }
    })
  }
  const btnCancel = () => {
    ruleFormRef.value.resetFields()
    drawer.value.show = false
    formData.stock_qty = ''
    formData.cost_price = ''
    formData.sale_price = ''
  }
  defineExpose({ drawer })
</script>

<style lang="scss" scoped>
  .batch_frame {
    width: 350px;
    margin-right: 8px;
  }
</style>
